
<!-- 设置编辑器 -->
<script type="text/html" data-template-name="Group">
    <!-- 设置第一行为Name -->
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="lora.group_filter.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]lora.group_filter.name">
    </div>
    <!-- 设置第二行为负载属性 -->
    <div class="form-row">
        <input type="hidden" id="node-input-outputs"/>
    </div>
    <!-- 设置第三行为标签(分组条件) -->
    <div class="form-row">
        <label for="node-input-label"> <span data-i18n="lora.group_filter.label_1"></span> </label>
    </div>
    <!-- 设置第四行为容器 -->
    <div class="form-row node-input-rule-container-row">
        <ol id="node-input-rule-container"></ol>
    </div>
    <div class="form-row">
        <input type="text" id="node-input-selectOutputMode" style="width: calc(100% - 105px);">
    </div>
</script>





<script type="text/javascript">
    RED.nodes.registerType('Group',{  
        category: 'LoRaWAN',
        color: '#ff9047',
        defaults: {
            name: {value:""},

            // 用于记录分组条件(容器中的规则)
            // rules: {
            //     value: {}
            // },
            rules: [],

            outputs: {value:1}, // 用于记录输出端口的数量

            OutputMode: {value: "option_Mode1"}
        },
        inputs:1,
        outputs:1,  // 初始输出数量为1，稍后将动态更改
        icon: "switch.svg",
        align: "left",
        label: function() {
            return this.name||this._("lora.group_filter.Label_0_dragOut");
        },


        oneditprepare: function() {
            var node = this;

            $("#node-input-selectOutputMode").typedInput({
                types: [
                    {
                        value: "selectOutputMode",
                        options: [
                                    { value: "option_Mode1", label: this._("lora.group_filter.label_2.SelectAll")},
                                    { value: "option_Mode2", label: this._("lora.group_filter.label_2.SelectOne")}
                                 ]
                    }
                ],
            });


            var outputCount = $("#node-input-outputs");

            // 根据现有规则初始化输出计数
            var initialOutputs = node.rules ? node.rules.length : 1;
            outputCount.val(initialOutputs);



            $("#node-input-rule-container").css({
                'min-height': '450px',
                'min-width': '450px'
            }).editableList({
                addItem: function(container, index, opt) {
                    var row = $('<div/>').addClass('form-row').appendTo(container);
                    var selectDiv = $('<div/>').addClass('form-row').appendTo(row);

                    // 创建一个下拉选项列表
                    var selectOptions = [
                        { value: 'devEUI', text: 'devEUI' },
                        { value: 'deviceName', text: 'deviceName' },
                        { value: 'applicationID', text: 'applicationID' },
                        { value: 'devAddr', text: 'devAddr' }
                    ];

                    // 创建下拉菜单并添加选项
                    var select = $('<select/>', {
                        class: 'node-input-rule-type',
                        id: 'select' + index
                    }).appendTo(selectDiv);

                    // 遍历选项列表，并将它们添加到下拉菜单中
                    selectOptions.forEach(function(option) {
                        $('<option/>', {
                            value: option.value, 
                            text: option.text,
                            selected: option.value === 'devEUI' // 设置devEUI为默认选中项
                        }).appendTo(select);
                    });

               
                    var addButton = $('<button/>', { text: '+', 'class': 'node-input-rule-add' }).appendTo(selectDiv);
                    addButton.on('click', function(e) {
                        e.preventDefault();
                        // 在当前子容器中添加新的文本框以及删除按钮
                        var textboxRow = $('<div/>').addClass('form-row').appendTo(container);
               
                        $('<input/>', {
                            type: 'text',
                            id: 'input' + index, // 给每个文本框一个基于索引的唯一ID
                            class: 'node-input-rule-property' // 也可以给所有文本框一个相同的类名以进行分组选择
                        }).appendTo(textboxRow);

                        var removeButton = $('<button/>', { text: '-', 'class': 'node-input-rule-remove' }).appendTo(textboxRow);
                        removeButton.on('click', function(e) {
                            e.preventDefault();
                            textboxRow.remove();
                        });
                    });
                    

                    // 如果提供了初始数据，恢复下拉选项和文本框
                    if (opt) {
                        select.val(opt.type || "devEUI");
                        if (opt.properties) {
                            opt.properties.forEach(function(property) {
                                var textboxRow = $('<div/>').addClass('form-row').appendTo(container);
                                $('<input/>', {
                                    'type': 'text',
                                    'class': 'node-input-rule-property',
                                    'value': property
                                }).appendTo(textboxRow);
                                var removeButton = $('<button/>', { text: '-', 'class': 'node-input-rule-remove' }).appendTo(textboxRow);
                                removeButton.on('click', function(e) {
                                    e.preventDefault();
                                    textboxRow.remove();
                                });
                            });
                        }
                    }

                    
                    // 创建一个输出标识符(箭头和数字)
                    var outputId = $('<span/>').addClass('node-input-rule-output-id').text(' → ' + (index + 1)).appendTo(selectDiv);

                    // 更新输出计数
                    updateOutputs();
                },
                removable: true,
                sortable: true,
                // 在重新排序项目时，需要使用以下代码来更新输出标识符
                sortItems: function(items) {
                    updateOutputIdentifiers();
                },
                // 删除选项时——>同时删除输出端口
                removeItem: function(opt) {
                    updateOutputs();
                    updateOutputIdentifiers();
                }
            });

            // 函数更新输出的数量
            function updateOutputs() {
                // 调用editableList('items')方法来获取该元素上可编辑列表的所有项。这些项将被赋值给rules变量
                var rules = $("#node-input-rule-container").editableList('items');
                outputCount.val(rules.length);
            }


            // 函数更新输出标识符
            function updateOutputIdentifiers() {
                $("#node-input-rule-container").editableList('items').each(function(i, el) {
                    $(el).find('.node-input-rule-output-id').text(' → ' + (i + 1));
                });
            }

            // 恢复已有的规则数据
            if (node.rules) {
                // 遍历所有的规则，将上次设置的规则恢复
                node.rules.forEach(function(rule) {
                    $("#node-input-rule-container").editableList('addItem', rule);
                });
            }

            $("#node-input-selectOutputMode").typedInput("value", node.OutputMode);
            
        },

        oneditsave: function() {
            var node = this;
            node.rules = []; // 准备存储规则数据的数组

            node.OutputMode = $("#node-input-selectOutputMode").val();

            // 遍历每个规则项，保存下拉选项和文本框的数据
            $("#node-input-rule-container").children().each(function() {
                // 找到所有的下拉选项框并保存
                var type = $(this).find('.node-input-rule-type').val();
                var properties = [];
                // 找到所有的文本框并保存
                $(this).find('.node-input-rule-property').each(function() {
                    properties.push($(this).val());
                });
                // 将下拉选项框+文本框 打包为对象 保存在rule数组的元素中
                node.rules.push({ type: type, properties: properties });
            });
        },
    });
</script>







